<template>
  <el-container class="layout-container-demo">
    <Asidebar/>
    <el-container>
      <Header></Header>
      <el-main>
        <!-- 标签页 -->
        <el-tabs v-model="currentActiveTab" @tab-click="handleTabClick" type="card" closable
                 @tab-remove="handleTabRemove">
          <el-tab-pane
              v-for="tab in tabs"
              :key="tab.name"
              :label="tab.title"
              :name="tab.name"
          >
            <!-- 嵌套路由 -->
            <router-view v-if="activeTab === tab.name"/>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </el-container>

</template>

<script setup>
import Asidebar from '@/components/Asidebar.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

import {ref, computed, watch, onMounted, reactive} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useTabsStore} from '@/stores/tabs.js'

//获取pinia中的标签管理tabs
const tabsStore = useTabsStore()
//获取路由器实例，用途：用于编程式导航和访问全局路由相关的方法和属性。
const router = useRouter()
//获取当前激活的路由对象， 用途：用于访问当前路由的信息，如路径、参数、查询参数、元数据等。
const route = useRoute()
//本页面中:当前激活的标签页
const currentActiveTab = ref(tabsStore.activeTab)

//通过计算属性来获取当前激活的标签页，因为tabsStore.activeTab是响应式的
const activeTab = computed(() => tabsStore.activeTab)
//const activeTab = tabsStore.activeTab
console.log("================ activeTab: ", activeTab.value)

//tabs是要发生变化的，当关闭时，它的元素会删除
const tabs = computed(() => tabsStore.tabs)

const handleTabClick = (tab) => {
  console.log(">>> 点击了标签：", tab.props.label, "对象:", tab)
  //修改tabsStore中的activeTab
  tabsStore.setActiveTab(tab.props.name)
  //编程式路由
  router.push({name: tab.props.name})
}

const handleTabRemove = (tabName) => {
  console.log("点击了删除标签按钮: ", tabName)
  tabsStore.closeTab(tabName)
}

// Watch for changes in tabs and activeTab to persist them
watch(tabs, (newTabs) => {
  console.log("watch tabs: ", newTabs)
  localStorage.setItem('tabs', JSON.stringify(newTabs))
}, {deep: true})

watch(activeTab, (newActiveTab) => {
  console.log("watch activeTab: ", newActiveTab)
  localStorage.setItem('activeTab', newActiveTab)
  //修改currentActiveTab值
  currentActiveTab.value = newActiveTab
})
// 页面加载时恢复状态
onMounted(() => {
  const savedTabs = JSON.parse(localStorage.getItem('tabs'))
  console.log('已保存的tabs: ', savedTabs)
  const savedActiveTab = localStorage.getItem('activeTab')
  console.log('已保存的activeTab: ', savedActiveTab)

  // 恢复isCollapse
  // isCollapse.value = localStorage.getItem('isCollapse') === 'true'

  // 恢复tabs
  if (savedTabs) {
    savedTabs.forEach(tab => {
      tabsStore.addTab(tab)
    })
  }

  // 恢复activeTab
  if (savedActiveTab) {
    tabsStore.setActiveTab(savedActiveTab)
    // 更新本地的currentActiveTab
    currentActiveTab.value = savedActiveTab
    // 更新路由
    router.push({name: savedActiveTab})
  }

})

</script>
<style lang="less" scoped>
.el-container {
  height: 100vh;
}

.el-main {
  padding: 20px 0 20px 20px;
}

/* 自定义激活标签背景颜色 */
:deep(.el-tabs__item.is-active) {
  background-color: var(--el-color-primary) !important;
  color: #fff !important;
}

</style>